<template>
	<view style="padding-bottom: 20rpx;">
		<!-- 滑动广告 -->
		<u-notice-bar mode="horizontal" :list="a" :more-icon="true"></u-notice-bar>
		
		<!-- 排序选择 -->
		<u-action-sheet
			:list="list"
			v-model="show"
			border-radius="20"
			@click="doSendRequest"
			class="search-input">
		</u-action-sheet>
		
		<view class="filter-box">
			<u-icon name="home" :custom-style="homeClass" @click="pullDown"></u-icon>
			
			<!-- 搜索框 -->
			<view class="search-box" :class="hoverClass">
				<input placeholder="请输入商家"
					v-model="search" 
					:show-action="false"
					:clearabled="true"
					shape="round"
					@confirm="sendSearch">
				</input>
			</view>

			<!-- 排序 -->
			<view @click="show = true">
				<text>智能排序</text>
				<image :src="filterIcon" class="filter-icon"></image>
			</view>	
		</view>
		
		<view class="item-box">
			<food-item v-for="item in food"
				:key="item.id" 
				:food="item"
				@click.native="toShop(item)">
			</food-item>
			
			<view v-if="notFoundItem" class="not-found-box">
				<text>找不到搜索的关键字</text>
			</view>
		</view>
	</view>
</template>

<script>
	import foodItem from "./components/food-item/food-item.vue"

	export default {
		components: {foodItem},
		data() {
			return {
				// 滑动广告
				a: [
					'美食美客', '鲜香可口',
					'经典美味', '口齿留香',
					'健康的美味','坊间的传奇',
					'品尝一次','回味一生'
				],
				
				// 列表
				food: [],
				current: 1,
				size: 10,

				// 搜索
				search: '',
				hoverClass: '',
				
				// 过滤
				list: [
					{
						text: "智能排序",
						color: "blue",
						fontSize: 28,
						subText: "默认"
					}, 
					{
						text: "营业中",
						color: "#00b386",
						fontSize: 28,
						orderField: "open",
						orderType: "DESC"
					},
					{
						text: "评分",
						fontSize: 28,
						orderField: "stars",
						orderType: "DESC"
					},
					{
						text: "暂停营业",
						color: "#696969",
						fontSize: 28,
						orderField: "open",
						orderType: "ASC"
					}
				],
				show: false,
				filterIcon: this.$myRequire("/other/filter.png"),
				homeClass: {
					"background": "#e6e8e9",
					"border-radius": "100%",
					"width": "60rpx",
					"height": "60rpx",
					"padding-left": "17rpx",
					"margin-right": "10rpx"
				}
			}
		},
		computed: {
			notFoundItem() {
				return this.food.length == 0;
			}
		},
		methods: {
			// 获取"美食"列表
			sendRequest(i) {
				let obj = {}
				
				if (i) {
					obj = {
						orderField: i.orderField,
						orderType: i.orderType
					}
				}
				
				this.$myRequest({
					url: '/food',
					data: {
						current: this.current,
						size: this.size,
						...obj
					}
				}).then(res => {
					this.food = res.data.result
				})
			},
			// 获取"美食"列表，并要求排序
			doSendRequest(index) { 
				this.sendRequest(this.list[index])
			},
			// 搜索功能
			sendSearch() {
				this.$myRequest({
					url: '/food/search',
					data: {
						search: this.search
					}
				}).then((res) => {
					console.log(res.data)
					if (res.data.code == 200) {
						this.food = res.data.result 
					} else {
						this.food = []
					}
				})		
				
				// 重置搜索框
				this.search = ''
			},
			//跳转到商店页面
			toShop(o) {
				uni.navigateTo({
					url: `/pages/shop/shop?obj=${JSON.stringify(o)}`
				})
			},
			// 下拉刷新
			pullDown() {
				uni.startPullDownRefresh()
			}
		},
		created() {
			this.sendRequest()
		},
		onPullDownRefresh() {
			this.sendRequest()
			
			setTimeout(() => {
				uni.stopPullDownRefresh()
			}, 500)
		}
	}

</script>

<style scoped>
	.item-box{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		flex-wrap: wrap;
	}
	
	.search-box{
		width: 400rpx;
		height: 60rpx;
		background-color: rgb(229 232 233);
		border-radius: 15rpx;
		padding: 7rpx 20rpx 2rpx;
	}


	.filter-box{
		width: 100%;
		height: 100rpx;
		background-color: #fff;
		border-radius: 0 0 7px 7px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx;
		box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, 
					rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
	}
	
	.filter-icon{
		margin-left: 5rpx;
		width: 35rpx;
		height: 35rpx;
		vertical-align: middle;
	}

	.not-found-box{
		margin-top: 50rpx;
		font-size: 15px;
		font-weight: 600;
		text-align: center;
	}
</style>
